<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
    width="900">
    <el-form :model="form">
      <el-row :gutter="24">
        <el-col :span="14">
          <el-form-item label="课程标题" label-width="100px">
            <el-input v-model="form.title" placeholder="请输入课程标题" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="科目" label-width="100px">
            <el-tree-select v-model="form.subjectId" :data="subjectData" :render-after-expand="false" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="封面图" label-width="100px">
            <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
              :show-file-list="false" :on-success="coverSuccess">
              <el-image v-if="form.imgs && form.imgs.length > 0" :src="form.imgs[0]" class="avatar" fit="cover"></el-image>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="内容简介" label-width="100px">
            <el-input type="textarea" v-model="form.brief" rows="8" placeholder="请输入内容简介" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="讲师" label-width="100px">
            <!-- <el-input :value="form.teacherName" readonly placeholder="请添加讲师" autocomplete="off">
              <template #append>
                <el-button :icon="Plus" @click="teacherOpenFn" />
              </template>
            </el-input> -->
            <el-select-v2 v-model="form.teacherIds" :options="teacherData" filterable multiple clearable placeholder="请选择讲师" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目标介绍" label-width="100px">
            <el-input v-model="form.introduce" placeholder="请输入目标介绍" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="每日最多学时" label-width="100px">
            <el-input type="number" v-model="form.dayOfHours" min="0" placeholder="请输入每日最多学时(为零表示不限制)"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="金额" label-width="100px">
            <el-input type="number" v-model="form.amount" min="0" placeholder="请输入金额" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="会员级别" label-width="100px">
            <el-input type="number" v-model="form.vip" min="0" placeholder="请输入会员级别" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学习数" label-width="100px">
            <el-input type="number" v-model="form.learns" min="0" placeholder="请输入学习数" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="点赞数" label-width="100px">
            <el-input type="number" v-model="form.likes" min="0" placeholder="请输入点赞数" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收藏数" label-width="100px">
            <el-input type="number" v-model="form.collects" min="0" placeholder="请输入收藏数" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分享数" label-width="100px">
            <el-input type="number" v-model="form.shares" min="0" placeholder="请输入分享数" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="推荐星级" label-width="100px">
            <el-rate v-model="form.starLevel" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="评分" label-width="100px">
            <el-input type="number" v-model="form.scoreLevel" min="0" placeholder="请输入评分(0-10)" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="发布时间" label-width="100px">
            <el-date-picker v-model="form.publishedTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择发布时间" :editable="false" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否启用" label-width="100px">
            <el-switch v-model="form.enabled" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序" label-width="100px">
            <el-input type="number" v-model="form.sort" min="1" placeholder="请输入排序(1...数字越大越靠后)" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容详情" label-width="100px">
            <div class="my_editor">
              <WeToolbar class="my_editor_tool" :editor="editorRef" :defaultConfig="toolbarConfig" mode="simple" />
              <WeEditor style="height: 400px; overflow-y: hidden" v-model="form.content" :defaultConfig="editorConfig"
                mode="simple" @onCreated="handleCreated" />
            </div>
            <!-- <el-input type="textarea" v-model="form.content" rows="8" placeholder="请输入内容详情" autocomplete="off" /> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="confirmFn">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- <MyTeacher :teacherVisible="teacherVisible" :forms="form" @teacherPick="teacherPickFn" /> -->
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { getQuestionListApi, teacherList } from '~/server/api'
import { treeFn } from '~/utils/utils'
import MyTeacher from '~/components/Teacher'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { shallowRef } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  forms: {
    type: Object
  }
})
const form = props.forms
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const toolbarConfig = {
  excludeKeys: [
    'insertVideo', // 删除视频
    'uploadVideo',
    'group-video',
    // 'insertImage',// 删除网络图片上传
    'insertLink',// 删除链接
    'insertTable',// 删除表格
    'codeBlock',// 删除代码块
    'fullScreen', // 全屏
    'redo',
    'undo',
    'todo',
    'group-image'
  ]
}
const editorConfig = { placeholder: '请输入文章内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
};
// 添加负责老师
const teacherVisible = ref(false)
const teacherOpenFn = () => {
  teacherVisible.value = true;
}
// 清除负责老师
const teacherDelFn = () => {
  form.teacherIds = [];
  form.teacherName = '';
}
// 老师取消 确认
const teacherPickFn = (e) => {
  teacherVisible.value = e.visible;
  if (e.form) {
    form.teacherIds = e.form.teacherIds;
    form.teacherName = e.form.teacherName;
  }
}
// 科目
const subjectData = ref([])
const { data: subjectRes } = await useAsyncData('subjectList', () => useServerRequest(getQuestionListApi, {
  method: 'post',
  body: JSON.stringify({
    pageNum: 1,
    pageSize: 500,
    courseOpen: true,
    exerciseOpen: true
  })
}))
if (subjectRes.value && subjectRes.value.errno === 0) {
  subjectData.value = treeFn(subjectRes.value.result.list, 0, [])
}
// 教师
const teacherData = ref([])
const { data: teacherRes } = await useAsyncData('teacherList', () => useServerRequest(teacherList, {
  method: 'post',
  body: JSON.stringify({
    pageNum: 1,
    pageSize: 500
  })
}))
if (teacherRes.value && teacherRes.value.errno === 0 && teacherRes.value.result && teacherRes.value.result.list.length > 0) {
  teacherRes.value.result.list.forEach(item => {
    item.label = item.name;
    item.value = item.id;
  })
  teacherData.value = teacherRes.value.result.list;
}
// 封面图上传
const coverSuccess = (res) => {
  if (res.errno === 0) {
    form.imgs = [res.result[0]];
  }
}
// 取消
const emit = defineEmits()
const cancelFn = () => {
  emit('pick', { visible: false })
}
// 确认
const confirmFn = () => {
  emit('pick', { visible: false, form })
}
</script>

<style lang="less" scoped>
.my-tree {
  width: 100%;
}

.my_editor {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;

  &_tool {
    border-bottom: 1px solid #dcdfe6;
  }
}

.avatar-uploader {
  border: 1px solid #DCDFE6;
  border-radius: 3px;
  background: #FFFFFF;

  &:hover {
    border-color: #C0C4CC;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #D6D6D6;
    width: 178px;
    height: 178px;
    text-align: center;

    &:hover {
      color: #C0C4CC;
    }
  }
}
</style>